<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Similar Items - Item {{ item_id }}</title>
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="{{ url_for('static', filename='images/favicon32.png') }}"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="{{ url_for('static', filename='images/favicon16.png') }}"
    />
    <link
      rel="icon"
      type="image/x-icon"
      sizes="32x32"
      href="{{ url_for('static', filename='images/favicon.ico') }}"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='css/style.css') }}"
    />
  </head>
  <body>
    <div class="container">
      <header class="mt-4 mb-5">
        <h1 class="text-center">Similar Movies</h1>
        <h3 class="text-center text-muted">
          Item {{ item_id }} {% if item_info is not none and not item_info.empty
          %} - {{ item_info.iloc[0].movie_title }} {% endif %}
        </h3>
        <p class="text-center">
          <a href="{{ url_for('index') }}" class="btn btn-outline-primary"
            >← Back to Home</a
          >
        </p>
      </header>

      <div class="row">
        <!-- Similar Items -->
        <div class="col-md-8">
          <div class="card shadow">
            <div class="card-header bg-success text-white">
              <h4 class="mb-0">Similar Movies</h4>
            </div>
            <div class="card-body">
              {% if similar_items.empty %}
              <div class="alert alert-warning">
                No similar items could be found for item {{ item_id }}.
              </div>
              {% else %}
              <p>
                Found {{ similar_items|length }} similar items in {{
                "%.2f"|format(generation_time) }} seconds using {{
                model_params.similarity_method }} similarity.
              </p>

              <!-- Similar Items Visualization -->
              {% if img_path %}
              <div class="text-center mb-4">
                <img
                  src="{{ img_path }}"
                  class="img-fluid"
                  alt="Similar Items Visualization"
                />
              </div>
              {% endif %}

              <!-- Similar Items Table -->
              <div class="table-responsive">
                <table class="table table-striped table-hover">
                  <thead>
                    <tr>
                      <th>Rank</th>
                      <th>Movie Title</th>
                      <th>Similarity</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for i, item in similar_items.iterrows() %}
                    <tr>
                      <td>{{ loop.index }}</td>
                      <td>{{ item.movie_title }}</td>
                      <td>{{ "%.4f"|format(item.similarity) }}</td>
                    </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
              {% endif %}
            </div>
          </div>
        </div>

        <!-- Item Info and Ratings -->
        <div class="col-md-4">
          <!-- Item Information -->
          {% if item_info is not none and not item_info.empty %}
          <div class="card shadow mb-4">
            <div class="card-header bg-info text-white">
              <h4 class="mb-0">Item Information</h4>
            </div>
            <div class="card-body">
              <h5>{{ item_info.iloc[0].movie_title }}</h5>
              <p><strong>Movie ID:</strong> {{ item_id }}</p>

              <!-- Add more movie information if available -->
              {% if 'release_date' in item_info.columns %}
              <p>
                <strong>Release Date:</strong> {{ item_info.iloc[0].release_date
                }}
              </p>
              {% endif %}

              <!-- Add genre information if available -->
              {% if 'Action' in item_info.columns %}
              <p>
                <strong>Genres:</strong>
                {% set genres = [] %} {% for genre in ['Action', 'Adventure',
                'Animation', 'Children', 'Comedy', 'Crime', 'Documentary',
                'Drama', 'Fantasy', 'Film-Noir', 'Horror', 'Musical', 'Mystery',
                'Romance', 'Sci-Fi', 'Thriller', 'War', 'Western'] %} {% if
                item_info.iloc[0][genre] == 1 %} {% set _ = genres.append(genre)
                %} {% endif %} {% endfor %} {{ genres|join(', ') }}
              </p>
              {% endif %}
            </div>
          </div>
          {% endif %}

          <!-- Users who rated this item -->
          {% if item_ratings is not none and not item_ratings.empty %}
          <div class="card shadow">
            <div class="card-header bg-warning text-white">
              <h4 class="mb-0">User Ratings</h4>
            </div>
            <div class="card-body">
              <p>
                This movie has been rated by {{ item_ratings|length }} users.
              </p>
              <div class="table-responsive">
                <table class="table table-sm">
                  <thead>
                    <tr>
                      <th>User ID</th>
                      <th>Rating</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for i, rating in item_ratings.iterrows() %} {% if
                    loop.index <= 10 %}
                    <tr>
                      <td>
                        <a
                          href="{{ url_for('recommend') }}?user_id={{ rating.user_id }}"
                          class="btn btn-sm btn-outline-primary"
                        >
                          User {{ rating.user_id }}
                        </a>
                      </td>
                      <td>
                        <div class="rating-stars">
                          <div class="rating-value">{{ rating.rating }}</div>
                          <div class="stars">
                            {% for i in range(rating.rating|int) %}
                            <span class="star full">★</span>
                            {% endfor %} {% for i in range(5 -
                            rating.rating|int) %}
                            <span class="star empty">☆</span>
                            {% endfor %}
                          </div>
                        </div>
                      </td>
                    </tr>
                    {% endif %} {% endfor %}
                  </tbody>
                </table>
              </div>
              {% if item_ratings|length > 10 %}
              <p class="text-center text-muted">
                Showing 10 of {{ item_ratings|length }} ratings
              </p>
              {% endif %}
            </div>
          </div>
          {% endif %}
        </div>
      </div>

      <footer class="mt-5 mb-3 text-center text-muted">
        <p>&copy; 2025 Item-Based Collaborative Filtering Project</p>
      </footer>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </body>
</html>
